<template>
  <div class="bigBox">
    <div class="pc-news">
      <el-row class="newsBox" :gutter="20">
        <el-col class="newsSubBox" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-col class="left" :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
            <el-col
              class="hotNews"
              :xs="24"
              :sm="24"
              :md="24"
              :lg="24"
              :xl="24"
            >
              <span>新闻热点</span>
            </el-col>
            <el-col
              class="imgNews"
              :xs="24"
              :sm="24"
              :md="24"
              :lg="24"
              :xl="24"
            >
              <el-col
                class="imgBox"
                :xs="11"
                :sm="11"
                :md="11"
                :lg="11"
                :xl="11"
              >
                <img src="" alt="" />
              </el-col>
              <el-col
                class="content"
                :xs="12"
                :sm="12"
                :md="12"
                :lg="12"
                :xl="12"
              >
                <el-col
                  class="newTile"
                  :xs="24"
                  :sm="24"
                  :md="24"
                  :lg="24"
                  :xl="24"
                >
                  <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18"
                    >新闻标题</el-col
                  >
                  <el-col class="time" :xs="6" :sm="6" :md="6" :lg="6" :xl="6"
                    >2024-12-2</el-col
                  >
                </el-col>
                <el-col
                  class="newIntroduce"
                  :xs="24"
                  :sm="24"
                  :md="24"
                  :lg="24"
                  :xl="24"
                >
                  <span
                    >我们的团队拥有丰富的经验和专业知识，可以应对各种挑战和需求。我们采用最先进的技术工具和方法，确保我们的解决方案在速度、安全性和可靠性方面处于领先地位。我们不断投资于研发和培训，以保持在科技行业的竞争优势。</span
                  >
                </el-col>
                <el-col
                  class="filmTime"
                  :xs="24"
                  :sm="24"
                  :md="24"
                  :lg="24"
                  :xl="24"
                >
                  <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                    <span>发布公司：腾通讯科技公司</span>
                  </el-col>
                  <el-col
                    class="goNewsDetail"
                    :xs="12"
                    :sm="12"
                    :md="12"
                    :lg="12"
                    :xl="12"
                  >
                    <span @click="goNewsDetails">查看详情</span>
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
          </el-col>
          <el-col class="right" :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
            <el-date-picker v-model="value1" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-col>
        </el-col>
        <el-col class="newsTitles" :xs="24" :sm="24" :md="24" :lg="24" :xl="24"
          >新闻资讯</el-col
        >
        <el-col class="newsList" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-col class="listBox" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-col class="item" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-col class="img" :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
                <img src="" alt="" />
              </el-col>
              <el-col
                class="content"
                :xs="16"
                :sm="16"
                :md="16"
                :lg="16"
                :xl="16"
              >
                <el-col
                  class="contentTitle"
                  :xs="24"
                  :sm="24"
                  :md="24"
                  :lg="24"
                  :xl="24"
                >
                  <el-col class="title" :xl="18">新闻标题</el-col>
                  <el-col class="time" :xl="6">2014-12-2</el-col>
                </el-col>
                <el-col
                  class="newsContent"
                  :xs="24"
                  :sm="24"
                  :md="24"
                  :lg="24"
                  :xl="24"
                  >我们的团队拥有丰富的经验和专业知识，可以应对各种挑战和需求。我们采用最先进的技术工具和方法，确保我们的解决方案在速度、安全性和可靠性方面处于领先地位。我们不断投资于研发和培训，以保持在科技行业的竞争优势。</el-col
                >
                <el-col
                  class="contentBot"
                  :xs="24"
                  :sm="24"
                  :md="24"
                  :lg="24"
                  :xl="24"
                >
                  <el-col
                    class="film"
                    :xs="13"
                    :sm="13"
                    :md="13"
                    :lg="13"
                    :xl="13"
                    >发布公司：腾通讯科技公司</el-col
                  >
                  <el-col
                    class="goDetail"
                    :xs="5"
                    :sm="5"
                    :md="5"
                    :lg="5"
                    :xl="11"
                    >查看详情</el-col
                  >
                </el-col>
              </el-col>
            </el-col>
            <el-col class="item" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-col class="img" :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
                <img src="" alt="" />
              </el-col>
              <el-col
                class="content"
                :xs="16"
                :sm="16"
                :md="16"
                :lg="16"
                :xl="16"
              >
                <el-col
                  class="contentTitle"
                  :xs="24"
                  :sm="24"
                  :md="24"
                  :lg="24"
                  :xl="24"
                >
                  <el-col class="title" :xl="18">新闻标题</el-col>
                  <el-col class="time" :xl="6">2014-12-2</el-col>
                </el-col>
                <el-col
                  class="newsContent"
                  :xs="24"
                  :sm="24"
                  :md="24"
                  :lg="24"
                  :xl="24"
                  >我们的团队拥有丰富的经验和专业知识，可以应对各种挑战和需求。我们采用最先进的技术工具和方法，确保我们的解决方案在速度、安全性和可靠性方面处于领先地位。我们不断投资于研发和培训，以保持在科技行业的竞争优势。</el-col
                >
                <el-col
                  class="contentBot"
                  :xs="24"
                  :sm="24"
                  :md="24"
                  :lg="24"
                  :xl="24"
                >
                  <el-col
                    class="film"
                    :xs="13"
                    :sm="13"
                    :md="13"
                    :lg="13"
                    :xl="13"
                    >发布公司：腾通讯科技公司</el-col
                  >
                  <el-col
                    class="goDetail"
                    :xs="5"
                    :sm="5"
                    :md="5"
                    :lg="5"
                    :xl="11"
                    >查看详情</el-col
                  >
                </el-col>
              </el-col>
            </el-col>
            <el-col class="item" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-col class="img" :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
                <img src="" alt="" />
              </el-col>
              <el-col
                class="content"
                :xs="16"
                :sm="16"
                :md="16"
                :lg="16"
                :xl="16"
              >
                <el-col
                  class="contentTitle"
                  :xs="24"
                  :sm="24"
                  :md="24"
                  :lg="24"
                  :xl="24"
                >
                  <el-col class="title" :xl="18">新闻标题</el-col>
                  <el-col class="time" :xl="6">2014-12-2</el-col>
                </el-col>
                <el-col
                  class="newsContent"
                  :xs="24"
                  :sm="24"
                  :md="24"
                  :lg="24"
                  :xl="24"
                  >我们的团队拥有丰富的经验和专业知识，可以应对各种挑战和需求。我们采用最先进的技术工具和方法，确保我们的解决方案在速度、安全性和可靠性方面处于领先地位。我们不断投资于研发和培训，以保持在科技行业的竞争优势。</el-col
                >
                <el-col
                  class="contentBot"
                  :xs="24"
                  :sm="24"
                  :md="24"
                  :lg="24"
                  :xl="24"
                >
                  <el-col
                    class="film"
                    :xs="13"
                    :sm="13"
                    :md="13"
                    :lg="13"
                    :xl="13"
                    >发布公司：腾通讯科技公司</el-col
                  >
                  <el-col
                    class="goDetail"
                    :xs="5"
                    :sm="5"
                    :md="5"
                    :lg="5"
                    :xl="11"
                    >查看详情</el-col
                  >
                </el-col>
              </el-col>
            </el-col>
            <el-col class="item" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-col class="img" :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
                <img src="" alt="" />
              </el-col>
              <el-col
                class="content"
                :xs="16"
                :sm="16"
                :md="16"
                :lg="16"
                :xl="16"
              >
                <el-col
                  class="contentTitle"
                  :xs="24"
                  :sm="24"
                  :md="24"
                  :lg="24"
                  :xl="24"
                >
                  <el-col class="title" :xl="18">新闻标题</el-col>
                  <el-col class="time" :xl="6">2014-12-2</el-col>
                </el-col>
                <el-col
                  class="newsContent"
                  :xs="24"
                  :sm="24"
                  :md="24"
                  :lg="24"
                  :xl="24"
                  >我们的团队拥有丰富的经验和专业知识，可以应对各种挑战和需求。我们采用最先进的技术工具和方法，确保我们的解决方案在速度、安全性和可靠性方面处于领先地位。我们不断投资于研发和培训，以保持在科技行业的竞争优势。</el-col
                >
                <el-col
                  class="contentBot"
                  :xs="24"
                  :sm="24"
                  :md="24"
                  :lg="24"
                  :xl="24"
                >
                  <el-col
                    class="film"
                    :xs="13"
                    :sm="13"
                    :md="13"
                    :lg="13"
                    :xl="13"
                    >发布公司：腾通讯科技公司</el-col
                  >
                  <el-col
                    class="goDetail"
                    :xs="5"
                    :sm="5"
                    :md="5"
                    :lg="5"
                    :xl="11"
                    >查看详情</el-col
                  >
                </el-col>
              </el-col>
            </el-col>
          </el-col>
        </el-col>
        <el-col class="pageBox" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-pagination background layout="prev, pager, next" :total="60">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
    <div class="yd-news">
      <div class="subBox">
        <div class="newHot">
          <div class="title">新闻热点</div>
          <img src="../../public/img/矩形 53@1x.png" alt="" />
        </div>
        <div class="newsTitle">
          <div class="head">
            <span class="lef">新闻标题</span>
            <span class="rig">2024-12-2</span>
          </div>
          <div class="content">
            我们的团队拥有丰富的经验和专业知识，可以应对各种挑战和需求。我们采用最先进的技术工具和方法，确保我们的解决方案在速度、安全性和可靠性方面处于领先地位。我们不断投资于研发和培训，以保持在科技行业的竞争优势。
          </div>
          <div class="foot">
            <span class="lef">发布公司：腾通讯科技公司</span>
            <span class="rig" @click="goNewsDetails">查看详情</span>
          </div>
        </div>
        <div class="chooseDay">
          <el-date-picker v-model="value1" type="date" placeholder="选择日期">
          </el-date-picker>
        </div>
        <div class="newsMation">
          <div class="title">新闻资讯</div>
          <img src="../../public/img/矩形 65@1x.png" alt="" />
        </div>
        <div class="newTitles">
          <div class="head">
            <span class="lef">新闻标题</span>
            <span class="rig">2024-12-2</span>
          </div>
          <div class="content">
            我们的团队拥有丰富的经验和专业知识，可以应对各种挑战和需求。我们采用最先进的技术工具和方法，确保我们的解决方案在速度、安全性和可靠性方面处于领先地位。我们不断投资于研发和培训，以保持在科技行业的竞争优势。
          </div>
          <div class="foot">
            <span class="lef">发布公司：腾通讯科技公司</span>
            <span class="rig" @click="goNewsDetails">查看详情</span>
          </div>
        </div>
        <div class="newTitles">
          <img src="../../public/img/矩形 66@1x.png" alt="" />
          <div class="head">
            <span class="lef">新闻标题</span>
            <span class="rig">2024-12-2</span>
          </div>
          <div class="content">
            我们的团队拥有丰富的经验和专业知识，可以应对各种挑战和需求。我们采用最先进的技术工具和方法，确保我们的解决方案在速度、安全性和可靠性方面处于领先地位。我们不断投资于研发和培训，以保持在科技行业的竞争优势。
          </div>
          <div class="foot foot2">
            <span class="lef">发布公司：腾通讯科技公司</span>
            <span class="rig" @click="goNewsDetails">查看详情</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      value2: "",
    };
  },
  methods: {
    goNewsDetails() {
      this.$router.push({
        path: "/newsDetail",
      });
    },
    getData() {},
  },
};
</script>
<style lang="scss">
.bigBox {
  background: #eee;
  .yd-news {
    width: 375px;
    display: none;
    // background: green;
    padding: 3px 15px 0 15px;
    box-sizing: border-box;
    color: #383f58;
    * {
      box-sizing: border-box;
    }
    .subBox {
      .newHot {
        .title {
          font-size: 24px;
          font-weight: bold;
          text-align: left;
          padding: 15px 0;
        }
        img {
          width: 100%;
          height: 172px;
        }
      }
      .newsTitle {
        margin-top: 18px;
        .head {
          display: flex;
          justify-content: space-between;
          .lef {
            font-weight: bold;
            font-size: 14px;
          }
          .rig {
            font-size: 12px;
          }
        }
        .content {
          font-size: 12px;
          color: #798099;
          margin-top: 20px;
          padding-right: 62px;
          text-align: left;
        }
        .foot {
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          .rig {
            color: #0066ff;
          }
        }
      }
      .chooseDay {
        margin-top: 46px;
      }
      .newsMation {
        margin-top: 30px;
        .title {
          font-weight: bold;
          font-size: 14px;
          text-align: left;
          padding: 15px 0;
        }
        img {
          width: 1005;
          height: 172px;
        }
      }
      .newTitles {
        // margin-top: 16px;
        img {
          width: 100%;
          height: 172px;
          margin-top: 16px;
        }
        .head {
          display: flex;
          justify-content: space-between;
          padding: 18px 0;
          .lef {
            font-weight: bold;
            font-size: 14px;
          }
          .rig {
            font-size: 12px;
          }
        }
        .content {
          font-size: 12px;
          color: #798099;
          // margin-top: 20px;
          text-align: left;
        }
        .foot {
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          .rig {
            color: #0066ff;
          }
        }
        .foot2 {
          padding-bottom: 34px;
        }
      }
    }
  }
  @media screen and (max-width: 750px) {
    .yd-news {
      display: block;
    }
    .pc-news {
      display: none;
    }
  }
  .pc-news {
    max-width: 1200px;
    margin: 0 auto;
    .newsBox {
      .newsSubBox {
        padding: 0 !important;
        .left {
          padding: 0 !important;
          .hotNews {
            text-align: left;
            margin-bottom: 30px;
            span {
              font-size: 36px;
              font-weight: bold;
            }
          }
          .imgNews {
            padding: 0 !important;
            .imgBox {
              background: #fff;
              height: 190px;
              border-radius: 10px;
              background: red;
            }
            .content {
              font-size: 13px;
              padding-left: 20px !important;
              text-align: left;
              .newTile {
                height: 26px;
                padding: 0 !important;
                font-weight: bold;
                font-size: 18px;
                margin-bottom: 20px;
                * {
                  padding: 0 !important;
                }
                .time {
                  font-size: 14px;
                  font-weight: normal;
                  text-align: right;
                }
              }
              .newIntroduce {
                height: 68px;
                padding: 0 !important;
                color: #798099;
                font-size: 12px;
                line-height: 17px;
                margin-bottom: 30px;
              }
              .filmTime {
                padding: 0 !important;
                font-size: 14px;
                * {
                  padding: 0 !important;
                }
                .goNewsDetail {
                  cursor: pointer;
                  color: #0066ff;
                  text-align: right;
                }
              }
            }
          }
        }
        .right {
          float: right;
          .el-date-editor {
            width: 100%;
          }
        }
      }
      .newsTitles {
        font-size: 36px;
        font-weight: bold;
        padding: 0 !important;
        text-align: left;
        margin-top: 91px;
        margin-bottom: 9px;
      }
      .newsList {
        padding: 0 !important;
        border-radius: 10px;
        background: #fff;
        padding: 20px 10px 20px 20px !important;
        .txt {
          font-weight: bold;
          font-size: 18px;
          color: #888;
          line-height: 31px;
          .newsTitle {
            font-size: 24px;
            color: #000;
            border-bottom: 1px solid #1e98d7;
            padding-bottom: 20px;
            margin-right: 7px;
          }
        }

        .listBox {
          padding: 0 !important;
          .item {
            padding: 0 !important;
            margin-bottom: 60px;
            .img {
              background: red;
              border-radius: 10px;
              height: 190px;
            }
            .content {
              margin-left: 20px;
              padding: 0 !important;
              * {
                padding: 0 !important;
              }
              .contentTitle {
                line-height: 26px;
                padding-top: 15px !important;
                .title {
                  text-align: left;
                  font-weight: bold;
                  font-size: 26px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
                .time {
                  text-align: right;
                  font-size: 14px;
                }
              }
              .newsContent {
                font-size: 12px;
                color: #798099;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
                margin-top: 20px;
                text-align: left;
              }
              .contentBot {
                text-align: left;
                margin-top: 60px;
                font-size: 14px;
                .film {
                  padding: 0 !important;
                }
                .goDetail {
                  padding: 0 !important;
                  text-align: center;
                  color: #0066ff;
                  cursor: pointer;
                  text-align: right;
                  padding-right: 6px;
                }
              }
            }
          }
        }
      }
      .pageBox {
        padding: 60px 0 70px;
      }
    }
  }
}
</style>